import { Button, Dialog, Form, Input } from "@nutui/nutui-react-taro";
import Taro from "@tarojs/taro";
import { useState } from "react";
import { bindBatteryApi, unbindBatteryApi } from "../../../../servers/servers";

const BangDingDianChiForm = ({ data, onFinish }) => {
  const [form] = Form.useForm();

  const [open, setOpen] = useState(false);

  const WrapperStyle = {
    display: "flex",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
  };

  return (
    <>
      <div className="binding_list_box">
        <div
          className="dianchiname"
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          {data?.batteryId ?? "空"}

          <Button
            type="primary"
            size="small"
            onClick={() => {
              setOpen(true);
            }}
            style={{
              width: 80,
            }}
          >
            解绑
          </Button>
        </div>

        <div>
          <span>绑定用户：{data?.bindUserName}</span>
          <span>绑定手机号：{data?.bindUserPhone}</span>
        </div>

        {/* <Input placeholder="请输入要绑定的手机号"></Input> */}
      </div>

      <Dialog
        title="确定要解绑该电池吗？"
        visible={open}
        onConfirm={async () => {
          const { msg = "" } = await unbindBatteryApi({
            battery: data?.batteryId,
            mobile: data?.bindUserPhone
          });

          if (msg === "SUCCESS") {
            Taro.showToast({
              title: "解绑成功",
              icon: "none",
              duration: 2000,
            });

            setOpen(false);

            onFinish();
          } else {
            // Taro.showToast({
            //   title: msg ?? "解绑失败",
            //   icon: "none",
            //   duration: 5000,
            // });
            Taro.showModal({
              title: "提示",
              content: msg ?? "解绑失败",

              showCancel: false,
            });
          }
        }}
        onCancel={() => {
          setOpen(false);
        }}
      >
        <div>
          <span>电池编码：{data?.batteryId}</span>
          <span>绑定用户：{data?.bindUserName}</span>
          <span>绑定手机号：{data?.bindUserPhone}</span>
        </div>
      </Dialog>
    </>
  );
};

export default BangDingDianChiForm;
